<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2023-06-06 02:16:03
 * @LastEditTime: 2023-06-06 16:18:11
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\GenderCode\components\Drawer\settingsComponents\FieldSet.vue
 * Copyright 版权声明
-->
<template>
  <div class="mod_inner">
    <el-form
      :rules="rules"
      ref="dataForm"
      :model="genderCodeModuleInfo"
      label-width="200px"
      label-position="top"
    >
      <ul class="columns">
        <li
          v-for="(item, index) in genderCodeModuleInfo.column"
          :key="index"
          :class="{active: activeColumn === index}"
          @click="handleClickColumn(index, item)"
        >
          {{ item.label || '' }} [ {{ item.prop }} ]
        </li>
      </ul>

    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'BaseSet',
  computed: {
    ...mapGetters([
      // 选择的表集合
      'genderCodeTableRowSet',
      // 模块配置信息
      'genderCodeModuleInfo'
    ])
  },
  components: {
  },
  data() {
    return {
      // 选中的 / 正在设置的列
      activeColumn: null,
      rules: {
      }
    }
  },
  watch: {
    // 选择的表集合
    genderCodeTableRowSet: {
      handler: function(val, oldVal) {
      },
      deep: true
    },
    // 模块配置信息
    genderCodeModuleInfo: {
      handler: function(val, oldVal) {
      },
      deep: true
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    // 点击某一列
    handleClickColumn(index, row) {
      this.activeColumn = Number(index)
      this.$store.dispatch('SetSettingColumnIndex', index)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
<style rel="stylesheet/scss" lang='scss' scoped>
.mod_inner{
  .columns{
    margin: 0;
    padding: 0 0 0 0px;
    > li{
      list-style: none;
      margin: 5px 0;
      padding: 0 10px;
      cursor: pointer;
      font-size: 14px;
      line-height: 2em;
      border-radius: 5px;
    }
    > li:hover{
      background-color:  #d9ecff;
    }
    > li.active{
      background-color:   #337ecc;
      color: #fff;
    }
  }
}
</style>
